<template>
  <Row :gutter="20">
    <Col
      v-for="item in postedList"
      :key="item.pid"
      :xs="24"
      :sm="24"
      :md="12"
      :xl="8"
      :xxl="8"
      class="ivu-mb-16"
    >
      <Card>
        <Row :gutter="20">
          <Col :span="4">
            <Avatar size="60" class="ivu-mb-16"></Avatar>
          </Col>
          <Col :span="12">
            <p>
              <strong>{{ item.title }}</strong>
            </p>
            <p>发布时间：{{ item.postedTime }}</p>
            <p>编号：{{ item.pid }}</p>
          </Col>
          <Col :span="8" v-if="item.currentProgress === 4">
            <Result type="success" desc="全部完成"> </Result>
          </Col>
        </Row>

        <Steps :current="item.currentProgress" v-if="item.currentProgress != 4">
          <Step
            :title="step.status"
            :content="step.content"
            v-for="step in item.progress"
            :key="step.content"
          ></Step>
        </Steps>
      </Card>
    </Col>
  </Row>
  <div class="ivu-mt ivu-mb ivu-text-center">
    <Page
      :total="allPostedNum"
      show-total
      show-elevator
      @on-change="pageChange"
      @on-prev="pageChange"
      @on-next="pageChange"
    />
  </div>
</template>

<script>
export default {
  name: "PostedView",
  data() {
    return {
      allPostedNum: 0,
      currentPage: 1,
      postedList: [
        {
          pid: "001",
          title: "标题标题标题标题",
          image: "原图/序图/译图",
          postedTime: "发布时间",
          // 0  代表 标记序号 1 代表提炼日文...
          // 已完成的status就是已完成；未完成的就是待进行 一一对应
          currentProgress: 2,
          progress: [
            {
              status: "已完成",
              content: "标记序号",
            },
            {
              status: "已完成",
              content: "提炼日文",
            },
            {
              status: "进行中",
              content: "翻译",
            },
            {
              status: "待进行",
              content: "嵌字",
            },
          ],
        },
        {
          pid: "002",
          title: "标题标题标题标题",
          image: "原图/序图/译图",
          postedTime: "发布时间",
          // 0  代表 标记序号 1 代表提炼日文...
          // 已完成的status就是已完成；未完成的就是待进行 一一对应
          currentProgress: 1,
          progress: [
            {
              status: "已完成",
              content: "标记序号",
            },
            {
              status: "进行中",
              content: "提炼日文",
            },
            {
              status: "待进行",
              content: "翻译",
            },
            {
              status: "待进行",
              content: "嵌字",
            },
          ],
        },
        {
          pid: "003",
          title: "标题标题标题标题",
          image: "原图/序图/译图",
          postedTime: "发布时间",
          // 0  代表 标记序号 1 代表提炼日文... 4代表全部完成
          // 已完成的status就是已完成；未完成的就是待进行 一一对应
          currentProgress: 4,
          progress: [
            {
              status: "已完成",
              content: "标记序号",
            },
            {
              status: "已完成",
              content: "提炼日文",
            },
            {
              status: "已完成",
              content: "翻译",
            },
            {
              status: "已完成",
              content: "嵌字",
            },
          ],
        },
      ],
      columns: [
        {
          title: "编号",
          key: "pid",
          width: 80,
        },
        {
          title: "原图",
          slot: "image",
        },
        {
          title: "标题",
          key: "title",
        },
        {
          title: "发布时间",
          key: "postedTime",
        },
        {
          title: "目前进度",
          key: "progress",
        },
      ],
      data: [
        {
          pid: 0,
          title: "sssss",
          progress: "",
        },
      ],
    };
  },
  mounted() {
    this.getPostedList();
  },
  methods: {
    getPostedList() {
      const user = JSON.parse(localStorage.getItem("user")).sys.user;

      this.axios
        .post(
          `https://manage.bhmanhua.top/server/api/manage/getPostedList.php?page=${this.currentPage}`,
          {
            user,
          }
        )
        .then((response) => {
          this.data = response.data.postedList;
          this.allPostedNum = response.data.allPostedNum;
        });
    },
    pageChange(page) {
      this.currentPage = page;
      this.getPostedList();
    },
  },
};
</script>

<style>
.ivu-result-desc {
  margin-bottom: 0 !important;
}
</style>
